<template>
  <div>
    <Row :gutter="20">
      <i-col
        :xs="8"
        :md="6"
        :lg="4"
        v-for="(infor, i) in inforCardData"
        :key="`infor-${i}`"
        style="height: 120px; padding-bottom: 10px"
      >
        <div style="width: 251px; height: 110px" @click="toUrl(i)">
          <infor-card
            shadow
            :color="infor.color"
            :icon="infor.icon"
            :icon-size="32"
          >
            <count-to :end="infor.count" count-class="count-style" />
            <p>{{ infor.title }}</p>
          </infor-card>
        </div>
      </i-col>
    </Row>
    <!-- <Row style="margin-top: 10px;width: 100%;">
      <Card shadow>
        <example style="height: 310px;" />
      </Card>
    </Row> -->
    <!-- <Row>
      <Card style="width:50%">
        <p slot="title">
          <Icon type="md-options" size="24"></Icon>
          系统服务
        </p>
        <a href="#" slot="extra">
          <Icon type="ios-arrow-dropright" size="24" />
          <Icon type="ios-pause-outline" size="24" />
        </a>
        <Alert type="warning">
          <span style="color: rgb(224, 164, 85);">系统服务使用要求运行的PHP的版本必须是默认的，并且可以直接执行PHP命令。如果启动失败可能是某些函数被禁用或者runtime的目录没有写入权
            限，可以在终端中运行 'php think task start' 来调试程序的错误。
          </span>
        </Alert>

        <div v-for="item in taskList" style="margin-top: 20px;">
          <span>
            <Icon type="ios-star-half"></Icon>
            {{ item.rate }}
          </span>
          <span style="margin-left: 25%;">
            <Icon type="ios-star-half"></Icon>
            {{ item.rate }}
          </span>
          <span style="margin-left: 25%;">
            <Icon type="ios-star-half"></Icon>
            {{ item.rate }}
          </span>
          <span style="margin-left: 25%;">
            <Icon type="ios-star-half"></Icon>
            {{ item.rate }}
          </span>
        </div>
      </Card>
    </Row> -->
    <Row :gutter="20" style="margin-top: 10px">
      <!-- <i-col :md="24" :lg="8" style="margin-bottom: 20px;">
        <Card shadow>
          <chart-pie style="height: 300px;" :value="pieData" text="用户访问来源"></chart-pie>
        </Card>
      </i-col> -->
      <i-col :md="24" :lg="16" style="margin-bottom: 20px">
        <Card shadow>
          <chart-bar
            style="height: 300px"
            :value="barData"
            text="每周用户活跃量"
          />
        </Card>
      </i-col>
    </Row>
  </div>
</template>

<script>
import InforCard from "_c/info-card";
import CountTo from "_c/count-to";
import { ChartPie, ChartBar } from "_c/charts";
export default {
  name: "home",
  components: {
    InforCard,
    CountTo,
    ChartPie,
    ChartBar,
  },
  data() {
    return {
      taskList: [],
      inforCardData: [
        {
          title: "全部订单",
          icon: "md-person-add",
          count: 803,
          color: "#2d8cf0",
        },
        {
          title: "待分配订单",
          icon: "md-locate",
          count: 232,
          color: "#19be6b",
        },
        {
          title: "进行中订单",
          icon: "md-help-circle",
          count: 142,
          color: "#ff9900",
        },
        { title: "定稿订单", icon: "md-share", count: 657, color: "#ed3f14" },
        {
          title: "投诉订单",
          icon: "md-chatbubbles",
          count: 12,
          color: "#E46CBB",
        },
        { title: "暂停订单", icon: "md-map", count: 14, color: "#9A66E4" },
        { title: "死单", icon: "ios-cut", count: 14, color: "#550fb9" },
        { title: "投诉已处理", icon: "ios-cube", count: 803, color: "#06b7e1" },
        { title: "投诉未处理", icon: "ios-disc", count: 232, color: "#bd19be" },
        {
          title: "待退款订单",
          icon: "logo-dribbble",
          count: 232,
          color: "#19a6be",
        },
        {
          title: "已退款订单",
          icon: "logo-dropbox",
          count: 232,
          color: "#3b5d89",
        },
        {
          title: "待收款未返还",
          icon: "ios-easel",
          count: 232,
          color: "#54939b",
        },
        {
          title: "待收款已返还",
          icon: "ios-flag",
          count: 232,
          color: "#beba19",
        },
        {
          title: "未上传发票",
          icon: "ios-flask",
          count: 232,
          color: "#9d925b",
        },
        {
          title: "已上传发票",
          icon: "ios-funnel",
          count: 232,
          color: "#e3b4e3",
        },
      ],
      pieData: [
        { value: 335, name: "直接访问" },
        { value: 310, name: "邮件营销" },
        { value: 234, name: "联盟广告" },
        { value: 135, name: "视频广告" },
        { value: 1548, name: "搜索引擎" },
      ],
      barData: {
        Mon: 13253,
        Tue: 34235,
        Wed: 26321,
        Thu: 12340,
        Fri: 24643,
        Sat: 1322,
        Sun: 1324,
      },
    };
  },
  methods: {
    toUrl(index) {
      this.$router.push({ name: "orderList", query: { ik: index } });
    },
    getInfo() {
      this.$axios("/admin/index/getInfo", {}).then((res) => {
        this.inforCardData[0].count = res.order_count;
        this.inforCardData[1].count = res.allot_order_count;
        this.inforCardData[2].count = res.running_order_count;
        this.inforCardData[3].count = res.over_order_count;
        this.inforCardData[4].count = res.complaint_order_count;
        this.inforCardData[5].count = res.stop_order_count;
        this.inforCardData[6].count = res.die_order_count;
        this.inforCardData[7].count = res.complaintOrderCount1;
        this.inforCardData[8].count = res.complaintOrderCount2;
        this.inforCardData[9].count = res.refundOrderCount;
        this.inforCardData[10].count = res.refundOrderCount1;
        this.inforCardData[11].count = res.returnOrderCount;
        this.inforCardData[12].count = res.returnOrderCount1;
        this.inforCardData[13].count = res.invoiceOrderCount;
        this.inforCardData[14].count = res.invoiceOrderCount1;
      });
    },
    getTaskList() {
      this.$axios("/admin/task/getTaskList", {}).then((res) => {
        this.taskList = res.data;
      });
    },
    getDauList() {
      this.$axios("/admin/index/getDauList", {}).then((res) => {
        this.barData = res;
      });
    },
  },
  mounted() {
    this.getInfo();
    this.getTaskList();
    this.getDauList();
  },
};
</script>

<style lang="less">
.count-style {
  font-size: 20px;
}
</style>
